<template>
   <!--面包屑-->
<div style="margin-bottom: 30px">
  <el-breadcrumb separator="/">
    <el-breadcrumb-item :to="{ path: '/Main' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item>
      <router-link to="/ContractHshow">货主合同管理</router-link>
    </el-breadcrumb-item>
    <el-breadcrumb-item>货主信息修改</el-breadcrumb-item>
  </el-breadcrumb>
</div>
    <div align="center">
<h2>货主合同修改</h2><br>
<table>
   <tbody>
<tr>
    <td>
 <el-form-item label="合同标题：" style="font-size: 20px;float: right;" prop="contractTitle">
        <el-input v-model="form.contractTitle" style="width: 300px;height: 40px;"
        placeholder="请输入合同标题" clearable />
      </el-form-item>
  
    </td>
    <td>
      <el-form-item label="货主单位" style="font-size: 20px;float: right;" prop="contractTitle">
        <el-input v-model="form.unit" style="width: 300px;height: 40px;"
        placeholder="请输入货主单位" clearable />
      </el-form-item>
    </td>
  </tr>
  <tr>
    <td>
      <el-form-item label="货主负责人：" style="font-size: 20px;float: right;" prop="contractTitle">
        <el-input v-model="form.personCharge" style="width: 300px;height: 40px;"
        placeholder="货主负责人：" clearable />
      </el-form-item>
    </td>
    <td>
      <el-form-item label="线路" style="font-size: 20px;float: right;" prop="contractTitle">
        <el-select v-model="form.lineName" placeholder="线路" style="width: 300px">
                            <el-option v-for="item in line" :label="item" :value="item" />
      </el-select> 
     </el-form-item>
    </td>
  </tr>
  <tr>
    <td>
      <el-form-item label="吨运价" style="font-size: 20px;float: right;" prop="contractTitle">
        <el-input v-model="form.tonPrice" style="width: 300px;height: 40px;"
        placeholder="吨运价" clearable />
      </el-form-item>
    </td>
    <td>
      <el-form-item label="包车条件吨位" style="font-size: 20px;float: right;" prop="contractTitle">
        <el-input v-model="form.ton" style="width: 300px;height: 40px;"
        placeholder="请输入包车条件吨位" clearable />
      </el-form-item>
    </td>
  </tr>
  <tr>
    <td>
      <el-form-item label="包车金额：" style="font-size: 20px;float: right;">
        <el-input v-model="form.charteredBusPrice" style="width: 300px;height: 40px;"
        placeholder="请输入包车金额" clearable />
      </el-form-item>
    </td>
   <td>
      <el-form-item label="经办人" style="font-size: 20px;float: right;">
        <el-input v-model="form.attn" style="width: 300px;height: 40px;"
        placeholder="请输入经办人" clearable />
      </el-form-item>
    </td>
  </tr>
  <tr>
    <td>
      <el-form-item label="签订时间"   style="font-size: 20px;float: right;">
        <el-date-picker v-model="form.dateofSigning" type="date"  value-format="YYYY-MM-DD"
        placeholder="请选择签订时间" clearable  style="width: 300px;height: 40px;"/>
      </el-form-item>
    </td>
      <td>
      <el-form-item label="合同金额" style="font-size: 20px;float: right;">
        <el-input v-model="form.contractAmount" style="width: 300px;height: 40px;"
placeholder="合同金额" clearable />
      </el-form-item>
    </td>
  </tr>
  <tr>
    <td colspan="2">
      <el-form-item label="合同标的或项目说明" 
        style="font-size: 20px;width: 970px;height: 100px;float: right;" >
      <el-input v-model="form.contractNote" type="textarea" style="font-size: 20px;width: 970px;height: 100px;"></el-input>
      </el-form-item>
      
    </td>
  </tr>
  <tr>
    <td colspan="2">
    
      <el-form-item label="合同主要条款/边更条款" 
        style="font-size: 20px;width: 970px;height: 100px;float: right;">
      <el-input v-model="form.contractTerms" type="textarea" style="font-size: 20px;width: 970px;height: 100px;"></el-input>
      </el-form-item>
    </td>
  </tr>
  <tr >
    <td style="font-size: 20px;">合同文本(附件)：</td>
    <td>
        <el-upload
    v-model:file-list="fileList"
    class="upload-demo"
    action="http://10.223.8.15:8000/hwrite/api/Contract/Upfile"
    multiple
    :on-preview="handlePreview"
    :on-remove="handleRemove"
    :before-remove="beforeRemove"
    :limit="3"
    :on-exceed="handleExceed"
    :on-success="handleSuccess"
  >
    <el-button type="primary">选取文件</el-button>
  
  </el-upload>
      <span>（单个附件最大支持20M，支持：PDF、Word、Excel、Txt格式）</span> 
    </td>
  </tr>
</tbody>
</table><br><br>
  <tr align="center">
    <el-button  @click="Cancel" style="width: 150px;height: 50px;"
     >取消</el-button>
    <el-button type="primary" @click="onSubmit" 
      style="width: 150px;height: 50px;">货主修改</el-button>
 </tr>
</div>
</template>
<script setup lang='ts'>
 import axios  from 'axios';
 import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
import { ElMessage, ElMessageBox } from 'element-plus'
const formSize = ref<ComponentSize>('default')
const ruleFormRef = ref<FormInstance>()
import type { UploadProps, UploadUserFile } from 'element-plus'
import { ref, reactive, onMounted,watch } from 'vue'; 

import { useRouter, useRoute } from 'vue-router';
const route = useRoute();
const router = useRouter();
const form=reactive({
    contractId:route.query.ContractId,
    contractTitle:'',//合同标题
     unit:'',//单位
    personCharge:'',//负责人
    lineId:1,//线路
    lineName:'',//线路名称  
    tonPrice:'',//吨价
    ton:'',//吨数
    charteredBusPrice:'',//包车金额
    attn:'',//经办人
    dateofSigning:'',//签订日期
    contractAmount:'',//合同金额
    contractNote:'',//合同标的或项目说明
    contractTerms:'',//合同主要条款/变更条款
    contractText:'',//合同文本
     contractNumber:'',//合同编号
     ccontractStatus:0,//合同状态
    contractClassification:1,//合同分类
    updatedBy:'admin',//更新人
    updatedDate:new Date(),//更新时间
    createdBy:'admin',//创建人
    createdDate:new Date(),//创建时间
    deletedBy:'admin',//删除人
    deletedDate:new Date(),//删除时间
})

onMounted(()=>{
    backfill()
    getLine()
}
)
//上传文件
const handleSuccess=(any:any)=>{
console.log(any);
form.contractText=any;
}
//线路
const line = ref([]);
const getLine = () => {
    axios.get("/hread/api/ContractRead/Getlines").then((res) => {
        line.value = res.data.data.list.map((o) => o.lineName);
    });
};

const backfill=()=>{
    axios.get('/hread/api/ContractRead/BackfillTshowContract', {
        params: {
          ContractId: route.query.ContractId
        }
      }).then(res => {
  form.contractTitle=res.data.data.contractTitle
      form.unit=res.data.data.unit
      form.personCharge=res.data.data.personCharge
      form.lineId=res.data.data.lineId
      form.tonPrice=res.data.data.tonPrice
      form.ton=res.data.data.ton
      form.lineName=res.data.data.lineName
      form.charteredBusPrice=res.data.data.charteredBusPrice
      form.attn=res.data.data.attn
      form.dateofSigning=res.data.data.dateofSigning
      form.contractAmount=res.data.data.contractAmount
      form.contractNote=res.data.data.contractNote
      form.contractTerms=res.data.data.contractTerms
      form.contractText=res.data.data.contractText
      form.contractNumber=res.data.data.contractNumber
      form.ccontractStatus=res.data.data.ccontractStatus
      form.contractClassification=res.data.data.contractClassification
      form.updatedBy=res.data.data.updatedBy
      form.updatedDate=res.data.data.updatedDate
      form.createdBy=res.data.data.createdBy
      form.createdDate=res.data.data.createdDate
      form.deletedBy=res.data.data.deletedBy
      form.deletedDate=res.data.data.deletedDate
     localStorage.setItem('contractText',res.data.data.contractText)
     kk()
   
    })
}
const fileList=ref()
const kk=()=>{
 const fileLists = ref([
  {
        name: localStorage.getItem('contractText'),
        url:'/hread/wwwroot/file/'+localStorage.getItem('contractText'),
 }
])
fileList.value=fileLists.value
console.log(fileList.value)
}
//修改草稿
const onSubmit = () => {
   console.log(form.contractText)
  axios.post('/hwrite/api/Contract/UpdateContract',form).then(res=>{
       if(res.data.data>0){
        ElMessage({
          message: '修改成功',
          type: 'success',
        })
        router.push('/ContractHshow')
       }else{
        ElMessage.error('修改失败')
       }
     })
}
//取消
const Cancel=()=>{
router.push('/ContractHshow')
}


const handleRemove: UploadProps['onRemove'] = (file, uploadFiles) => {
   alert(1)
console.log(file, uploadFiles)
}

const handlePreview: UploadProps['onPreview'] = (uploadFile) => {
    alert(2)
  console.log(uploadFile)
 
}

const handleExceed: UploadProps['onExceed'] = (files, uploadFiles) => {
    alert(3)
    ElMessage.warning(
    `The limit is 3, you selected ${files.length} files this time, add up to ${
      files.length + uploadFiles.length
    } totally`
  )
}

const beforeRemove: UploadProps['beforeRemove'] = (uploadFile, uploadFiles) => {
    alert(4)
  return ElMessageBox.confirm(
    `确定删除吗 ${uploadFile.name} ?`
  ).then(
    () => true,
    () => false
  )
}
</script>

